<!DOCTYPE html>
<html lang="zh_CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport"
    content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
  <title>送你一只小黄人</title>
  <link rel="stylesheet" href="./style.css">
</head>

<body>
  <style id="demo1"></style>
  <div id="demo2"></div>
  <div id="buttons">
    <button id="btnPause">暂停</button>
    <button id="btnPlay">播放</button>
    <button id="btnSlow">慢速</button>
    <button id="btnFast">快速</button>
  </div>
  <div id="html">
    <div class="preview-wrapper">
      <div class="preview">
        <div id="main">
          <div id="minion-body" class="minion">
            <div id="goggles" class="minion">
              <div id="frame" class="minion"></div>
              <div id="lense" class="minion"></div>
              <div id="eye-ball" class="minion">
                <div id="eye-pupil" class="minion"></div>
              </div>
            </div>
  
            <div id="mouth" class="minion">
              <div id="mouth-shadow" class="minion"></div>
              <div class="teeth"></div>
              <div class="teeth"></div>
              <div class="teeth"></div>
              <div class="teeth"></div>
              <div class="teeth"></div>
              <div id="tongue" class="minion"></div>
            </div>
  
            <div id="arms" class="minion">
              <div id="left-arm" class="minion"></div>
              <div id="left-hand" class="minion"></div>
              <div id="right-arm" class="minion"></div>
              <div id="right-hand" class="minion"></div>
            </div>
  
            <div id="dungarees" class="minion">
              <div id="left-strap" class="minion"></div>
              <div id="right-strap" class="minion"></div>
              <div id="dungarees-front" class="minion"></div>
              <div id="dungarees-pocket" class="minion"></div>
              <div id="dungarees-pocket-left" class="minion"></div>
              <div id="dungarees-pocket-right" class="minion"></div>
              <div id="dungarees-logo" class="minion"></div>
              <div id="dungarees-main" class="minion"></div>
            </div>
  
            <div id="legs" class="minion">
              <div id="left-leg" class="minion"></div>
              <div id="left-foot" class="minion"></div>
              <div id="right-leg" class="minion"></div>
              <div id="right-foot" class="minion"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
    window.onload = function () {
      document.addEventListener('touchstart', function (event) {
        if (event.touches.length > 1) {
          event.preventDefault();
        }
      }, {
        passive: false
      });
      let lastTouchEnd = 0;
      document.addEventListener('touchend', function (event) {
        let now = (new Date()).getTime();
        if (now - lastTouchEnd <= 300) {
          event.preventDefault();
        }
        lastTouchEnd = now;
      }, false);
    };
  </script>
  <script src="./main.js"></script>
</body>

</html>